#{extends 'main.html' /}
#{set title:'Meu Cafofo' /}
#{set 'moreScripts'}

<script type="text/javascript">
// Photos
var myPix = new Array(3)
myPix[0] = "imagem1";
myPix[1] = "imagem2";
myPix[2] = "imagem3";

// Text
var myText = new Array(3)
myText[0] = "";
myText[1] = "";
myText[2] = "";

// Configuração
var format = ".jpg";
var timer = "4500";

var i = 1;

function animator(obj,pega) {
if (obj != "fecha") {
intervalo = window.setInterval("change()",timer);
}else { 
window.clearInterval(intervalo);
if (pega == "imagem1") {
document.getElementById("image").src = 'public/images/' + myPix[0]  + format;
document.getElementById('tarja').innerHTML=myText[0];
}else if (pega == "imagem2") {
document.getElementById("image").src = 'public/images/' + myPix[1]  + format;
document.getElementById('tarja').innerHTML=myText[1];
}else {
document.getElementById("image").src = 'public/images/' + myPix[2]  + format;
document.getElementById('tarja').innerHTML=myText[2];
}
intervalo = window.setInterval("change()",timer);
}
}

function change() {
if (i < myPix.length) {
document.getElementById("image").src = 'public/images/' + myPix[i % myPix.length] + format;

if (i == 0) {
document.getElementById('tarja').innerHTML=myText[i];
}else if (i == 1) {
document.getElementById('tarja').innerHTML=myText[i];
}else {
document.getElementById('tarja').innerHTML=myText[i];
i = -1;
}
i++;
}else { i = 0; }
}

window.onload=animator('go');
</script>
#{/set}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-BR">

  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  
  <link href="../../public/stylesheers/bootstrap-responsive.css " rel="stylesheet" type="text/css" />
  <link href="../../public/stylesheers/bootstrap.css " rel="stylesheet" type="text/css" />
  <link href="../../public/stylesheers/main.css " rel="stylesheet" type="text/css" />
  <link href="../../public/stylesheers/tablesorter.css " rel="stylesheet" type="text/css" />
  </head>
  <body>
  <div class="container">
    	
    	<table cellpadding="0" cellspacing="0">
<tr>
<td background="public/images/background.png" nowrap="nowrap"><img id="image" src="public/images/imagem1.jpg" width='550' height='290' style="margin:0 10px 0px 0px;"></td>
<!--
1) Em id use os valores que colocou na Array
2) Em src coloque o endereço das imagens
-->
<td background="public/images/background.png" style="width:68px;" nowrap="nowrap">
<a href="javascript:;"><img class="imgmenuone" src="public/images/imagem1.jpg" id="imagem1" onClick="animator('fecha',id);" width='58' height='58'></a>
<br>
<a href="javascript:;"><img class="imgmenu" id="imagem2" src="public/images/imagem2.jpg" onClick="animator('fecha',id);" width='58' height='58'></a>
<br>
<a href="javascript:;"><img class="imgmenu" id="imagem3" src="public/images/imagem3.jpg" onClick="animator('fecha',id);" width='58' height='58'></a>
</td>
</tr>
</table>
<div class="transp"></div>
<div id="tarja"></div>

          <h2>Destaques</h2>

          <div class="row-fluid" style="float: left;">
          #{if imovels}
           #{list imovels.size()>5?imovels[0..4]:imovels,as:'imovel'}
            <div class="span2_3 pull-center well">
            <h4>Ref: ${imovel.id}</h4>
				<img src="@{imovels.mostrarFoto1(imovel.id)}" width="100px"/><br /><br />
              		<a class="btn btn-small" href="@{imovels.mostrar(imovel.id)}">Ver imóvel &raquo;</a>
              	
            	</div><!--/span-->
            #{/list}
            #{/if}
            #{else}
            	<p>Não há Imóveis para exibir</p>
            #{/else}
          </div><!--/row-->
          
          </div>
          

    </body>
    </html>